মিডিয়া কুয়েরি কি?

মিডিয়া কুয়েরি হলো সিএসএস(৩) এ সংযোজিত একটি পদ্ধতি যা ওয়েব পেজকে রেস্পন্সিভ করার জন্য ব্যবহার করা হয়।

সিএসএস মিডিয়া কুয়েরি ব্যবহারের জন্য @media ব্যবহার করা হয় এবং একটি প্রস্থ নির্ধারণ করা হয় এবং ঐ প্রস্থের সকল ডিভাইসের জন্য স্টাইল ডিফাইন করা হয়।

kt_satt_skill_example_id=1821

একটি ব্রেকপয়েন্ট যোগ করি

এর আগের টিউটোরিয়ালে সারি এবং কলাম দিয়ে একটি রেস্পন্সিভ ওয়েব পেজ তৈরি করেছিলাম, কিন্তু তা ছোট ডিভাইসে ভালো দেখায়নি।

মিডিয়া কুয়েরির সাহায্যে আমরা তা ঠিক করবোঃ

৭৬৮পিক্সেলের নিচের ডিভাইসের জন্য মিডিয়া কুয়েরি ডিফাইন করিঃ

kt_satt_skill_example_id=1822

মোবাইল ফার্স্ট ডিজাইন

মোবাইল ফার্স্ট মানে হচ্ছে, কম্পিউটার বা অন্যান্য বড় ডিভাইসের পূর্বে মোবাইলের জন্য ডিজাইন করা।

এর অর্থ এই যে আমাদের সিএসএস-এ কিছু পরিবর্তন করতে হবে।

স্ক্রিন সাইজ ৭৬৮ পিক্সেলের চেয়ে ছোট হলে স্টাইল পরিবর্তন না করে,৭৬৮ পিক্সেলের চেয়ে বড় হলে পরিবর্তন করবো। এটা আমাদের ডিজাইনকে মোবাইল ফার্স্ট করবেঃ

kt_satt_skill_example_id=1823

ট্যাবলেটের জন্য ডিজাইন

আমরা ট্যাবলেট এবং মোবাইল ফোনের মাঝেও একটি ব্রেকপয়েন্ট যোগ করবো।

এই রকম করার জন্য আমরা আরেকটি মিডিয়া কুয়েরি (৬০০পিক্সেলে) এবং একসেট নতুন ক্লাস ব্যবহার করবো ৬০০ পিক্সেলের বড় (কিন্তু ৭৬৮ পিএক্সেলের ছোট) ডিভাইসের জন্যঃ

kt_satt_skill_example_id=1824

ইহা দেখতে অদ্ভুত হলেও আমরা একই রকম দুই সেট ক্লাস ব্যবহার করেছি,কিন্তু ইহা আমাদেরকে প্রতিটি ব্রেকপয়েন্টে কি ঘটবে তা নিয়ন্ত্রণ করার সুযোগ করে দিয়েছেঃ

এইচটিএমএল

<div class="row">
   <div class="col-3 col-m-3">...</div>
   <div class="col-6 col-m-9">...</div>
   <div class="col-3 col-m-12">...</div>
</div>

উদাহরণের বর্ণনা

কম্পিউটারের জন্যঃ

প্রথম ও তৃতীয় সেকশন উভয়ে ৩ টি কলামে ভাগ হবে, আর মাঝেরটি ৬টি কলামে ভাগ হবে।

ট্যাবলেটের জন্যঃ

প্রথম সেকশন ৩টি কলামে ভাগ হবে, দ্বিতীয়টি ৯টি কলামে ভাগ হবে এবং তৃতীয়টি 12 টি কলামে ভাগ হবে আর প্রথম ও দ্বিতীয় কলামটির নিচে প্রদর্শিত হবে।

ওরিয়েন্টেশনঃ Portrait / Landscape

ব্রাউজার ওরিয়েন্টেশনের ফলে পেজের লে-আউট পরিবর্তন করতে মিডিয়া কুয়েরি ব্যবহার করা যায়ঃ

আপনি একসেট সিএসএস প্রোপার্টি রাখতে পারেন যেগুলো "Landscape" ওরিয়েন্টেশন বা ব্রাউজার উইন্ডোর উচ্চতা যখন প্রস্থের চেয়ে কম হবে তখন কাজ করবেঃ

kt_satt_skill_example_id=1825